<template>
    <div>
        <el-dialog title="添加盘点单" :visible.sync="disable" :before-close="conmel" width="800px">
            <div class="botcenten">
                <div>
                    <el-form label-position='right' :inline="true" class="demo-form-inline">
                        <el-form-item label="盘点单名称:" label-width="200px">
                            <el-input></el-input>
                        </el-form-item>
                        <el-form-item label="盘点仓库:" label-width="200px">
                            <el-select class="handle-select" clearable v-model="come" placeholder="请选择">
                                <el-option v-for="item in comelist" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="盘点管理员:" label-width="200px">
                            <el-select class="handle-select" clearable v-model="come" placeholder="请选择">
                                <el-option v-for="item in comelist" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="盘点截止时间:" label-width="200px">
                            <el-date-picker v-model="value1" type="date" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="盘点备注:" label-width="200px">
                            <el-input></el-input>
                        </el-form-item>
                        <el-form-item label="耗材导入:" label-width="200px">
                            <div class="upload-excel">
                                <!-- 上传文件的input框，但是不能让用户看见 -->
                                <input ref="inputName" class="excel-upload-input" type="file" accept=".xls, .xlsx"
                                    @change="selectedFile" />

                                <div class="drop" @dragover.prevent="allowDrop" @drop.prevent="handleDrop">
                                    <i class="el-icon-upload" />
                                    <el-button type="text">下载导入模板</el-button>
                                    <div v-if="uploadedFile">
                                        <p>已上传的文件：{{ uploadedFile.name }}</p>
                                        <p>文件大小：{{ fileSizeInMB }} MB <span class="el-icon-delete"
                                                @click="delfile"></span></p>
                                        <!-- 其他文件相关信息展示 -->
                                    </div>
                                    <span v-else>
                                        将文件拖到此处或
                                        <el-button type="text" @click="selectFile">点击上传</el-button>
                                    </span>
                                </div>
                            </div>
                        </el-form-item>

                    </el-form>
                    <!-- 上传文件的input框，但是不能让用户看见 -->
                    <!-- <input ref="inputName" class="excel-upload-input" type="file" accept=".xls, .xlsx"
                        @change="selectedFile" /> -->
                </div>

            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="conmel">取 消</el-button>
                <el-button type="primary" @click="conmel">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script>

export default {
    name: "ventory-add",
    props: {
        disable: {
            type: Boolean,
            required: true
        }
    },
    watch: {

    },
    components: {
    },
    data() {
        return {

            query: {
                pageIndex: 1,
                pageSize: 15,
                pageTotal: 0,
            },
            tableData: [{ name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }],
            come: '',
            comelist: [],
            formData: null,
            uploadedFile: null // 用户上传的文件信息
        }
    },
    mounted() {

    },
    computed: {
        fileSizeInMB() {
            if (this.uploadedFile) {
                return (this.uploadedFile.size / (1024 * 1024)).toFixed(2); // 将字节转换为 MB 并保留两位小数
            }
            return 0; // 如果没有上传文件，则默认显示 0 MB
        }
    },
    methods: {
        delfile() {
            this.formData = null
            this.uploadedFile = null // 用户上传的文件信息
        },
        conmel() {
            this.formData = null
            this.uploadedFile = null // 用户上传的文件信息
            this.$emit('close')
        },
        importsub() {
            this.$refs.inputName.click()
        },
        selectFile() {
            this.$refs.inputName.click()
        },
        // 处理点击上传事件
        selectedFile(e) {
            const file = e.target.files[0]
            this.uploadedFile = file;
            this.formData = new FormData()
            this.formData.append('file', file)
        },
        // 允许拖放
        allowDrop(event) {
            event.preventDefault();
        },
        // 处理拖放事件
        handleDrop(event) {
            event.preventDefault();
            const fileTypes = ['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'];
            if (!event.dataTransfer.types || !event.dataTransfer.files || event.dataTransfer.files.length === 0 || !fileTypes.includes(event.dataTransfer.files[0].type)) {
                // 不符合要求的文件类型，进行相应处理，例如显示提示信息或者阻止拖放
                // this.$message.success('不支持的文件类型!')
                this.$message({
                    showClose: true,
                    message: '不支持的文件类型',
                    type: 'warning'
                });

            } else {
                const file = event.dataTransfer.files[0];
                this.uploadedFile = file;
                this.formData = new FormData();
                this.formData.append('file', file);
            }
        },

    }

}
</script>


<style lang="less" scoped>
::v-deep .el-input {
    width: 200px;
}

::v-deep .el-textarea {
    width: 500px;
}

::v-deep .el-upload {
    height: auto;
    width: auto;
    border: 0;
    border-radius: 4px;
}

.upload-excel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 20px;
    width: 360px;
    height: 180px;
    align-items: center;
    color: #697086;
}

.btn-upload,
.drop {
    border: 1px dashed #dcdfe6;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 160px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.drop {
    line-height: 40px;
    color: #bbb;


}

i {
    font-size: 60px;
    display: block;
    color: #c0c4cc;
}

.excel-upload-input {

    display: none;
    /* background-color: #697086; */
    z-index: -9999;
}

.buttoncenter {
    margin-bottom: 10px;
    float: right;
}
</style>